<template>
  <div class="register">
      <van-nav-bar style="background-color: #4fc08d;" id="reset" left-text="返回" title="注册" @click-left="back"></van-nav-bar>
    <van-cell-group>
      <van-field  v-model="username"  clearable  @blur="usernameBlur" :error-message="usernamemsg" label="用户名:" placeholder="请输入用户名" />
      <van-field  v-model="nickname"  clearable  @blur="nicknameBlur" :error-message="nicknamemsg" label="昵称:" placeholder="请输入昵称" />
      <van-field v-model="password" clearable  @blur="passwordBlur" :error-message="passwordmsg" type="password" label="密码:" placeholder="请输入密码" />
      <van-field v-model="repassword"  clearable @blur="repasswordBlur" :error-message="repasswordmsg" type="password" label="确认密码:" placeholder="请重复输入密码" />
      <van-field v-model="phone"  clearable @blur="phoneBlur" :error-message="phonemsg" type="number" label="手机号:" placeholder="请输入手机号" />
    </van-cell-group>
    <van-button type="primary" @click="register"  size="large" text="注册" style="border-radius:5px;"></van-button>
  </div>
</template>
<script>
export default {
    data(){
        return{
            username : "",
            nickname:"",
            password : "",
            repassword : "",
            phone : "",
            usernamemsg:"",
            nicknamemsg:"",
            passwordmsg:"",
            repasswordmsg:"",
            phonemsg:"",
        }
    },
    methods:{
        back(){
            this.$router.push('/me')
        },
        usernameBlur(){
             let reg=/^\w{6,12}$/;
           if(reg.test(this.username)||this.username==""){
               this.usernamemsg=""
               return true
           }else{
               this.usernamemsg="请输入6到12位的数字或字母"
               return false
           }
        },
        nicknameBlur(){
            let reg=/^[\u4e00-\u9fa5_a-zA-Z0-9.·-]{2,8}$/
            if(reg.test(this.nickname)|| this.nickname==""){
                this.nicknamemsg=""
                return true
            }else{
                this.nicknamemsg="请输入2到8位汉字/字母或数字的昵称,不支持特殊字符"
            }
        },
        passwordBlur(){
            let reg=/^\d{6}$/;
           if(reg.test(this.password)||this.password==""){
               this.passwordmsg=""
               return true
           }else{
               this.passwordmsg="请输入6位数字"
               return false
           }
        },
        repasswordBlur(){
            let reg=/^\d{6}$/;
           if((reg.test(this.repassword) && this.repassword==this.password)||this.repassword==""){
               this.repasswordmsg=""
               return true
           }else{
               this.repasswordmsg="和第一次输入的密码不一致"
               return false
           }
        },
        phoneBlur(){
            let reg=/^1[3-9]\d{9}$/;
            if(reg.test(this.phone)||this.phone==""){
               this.phonemsg=""
               return true
           }else{
               this.phonemsg="请输入正确的手机号"
               return false
           }
        },
        register(){
            if(this.usernameBlur()&&this.passwordBlur()&&this.repasswordBlur()&&this.phoneBlur()&&this.nicknameBlur()){
                let param=`name=${this.username}&password=${this.password}&tel=${this.phone}&nickname=${this.nickname}`
                    this.axios.post('/register',param) .then((result) => {
                        console.log(result)
                        if(result.data.code==200){
                            this.$messagebox('注册成功')
                            this.$router.push('/login')
                            }else{
                                 this.$messagebox('注册失败','用户已存在')
                            }
                            
                    });     
                }else{
            }
        }
    }
}
</script>
<style scoped>
.van-button::before{
    font-size: 16px;
}
#reset /deep/ .van-ellipsis{
		color: white !important;
}
#reset /deep/ .van-nav-bar__text{
		color: white !important;
}
</style>